<template>
	<div>
		<div class="main">
			<div>返回</div>
			<div style="font-size: 1.25rem;font-weight: 18.75;">教学资料库</div>
			<div style="background-color:#3a4357;height: 3.25rem;width: 3.25rem;">完成</div>
		</div>
		<div style="margin-left: 10%;margin-right: 10%;">
			<div class="btn_group">
				<div class="header1">
					<div style="height: 36px;line-height: 2.25rem;font-size: 2.25rem;">我的课程名</div>

				</div>
				<!-- 搜索框 -->
				<!-- <div class="dataSearch"> -->
					<!-- 输入框 -->
					<!-- <input type="text" class="ipt_val" placeholder="搜索" v-model="formData.search" /> -->
					<!-- 放大镜 -->
					<!-- <input type="button" class="ipt_fdj" @click="getFiles" /> -->
					<!-- 搜索按钮 -->
					<!-- <button type="button" class="ipt_search" @click="getFiles">搜索</button> -->
				<!-- </div> -->
			</div>
			<JobComponent @child1-event="parentEvent" v-if="!show" :UserId="UserId"></JobComponent>
			<WorkComponent @child2-event="parentEvent1" v-if="show" :UserId="UserId"  :phone="phone"></WorkComponent>

			<!-- <div style="margin-top: 1.875rem;">
				<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange"
				 :header-cell-style="{'background-color': '#f2f4f7'}" :cell-style="{padding:'20px 0'}">
					<el-table-column type="selection">
					</el-table-column>
					<el-table-column label="姓名">
						<template slot-scope="scope">{{ scope.row.date }}</template>
					</el-table-column>
					<el-table-column prop="name" label="学号">
					</el-table-column>
					<el-table-column prop="name" label="院系">
					</el-table-column>
					<el-table-column prop="name" label="专业">
					</el-table-column>
					<el-table-column prop="name" label="班级">
					</el-table-column>
					<el-table-column prop="address" label="加入时间" show-overflow-tooltip>
					</el-table-column>
				</el-table>
			</div> -->
		</div>
	</div>
</template>

<script>
	import JobComponent from "./JobComponent.vue"
	import WorkComponent from './WorkComponent.vue'
	export default {
		components: {
			JobComponent: JobComponent,
			WorkComponent:WorkComponent
		},
		data() {
			return {
				// 表单数据
				formData: {
					// 上级文件夹id，默认全部文件最上层为0
					id: 0,
					// 搜索框内容
					search: '',
					// 是否逆序
					reverse: false
				},
				multipleSelection: [],
				show:false,
				UserId:this.$route.query.userId,
				phone:''
			}
		},
		methods: {
			// 获取文件列表
			async getFiles() {
				// 清空被选中文件id列表
				this.checkedList = []
				console.log('获取文件列表')
				// params参数：文件夹id、搜索的值、是否逆序
				// this.files = await axios.get('/files', { params: this.formData })
			},
			mycourse() {
				// alert(this.UserId);
				this.$router.push('/mycourse');
			},
			parentEvent(data)
			{
				this.show=!this.show;
				this.phone=data;
			},
			parentEvent1()
			{
				// alert(data);
				this.show=!this.show;
			}

		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		width: 100%;
		height: 3.25rem;
		line-height: 3.25rem;
		display: flex;
		justify-content: space-between;
		color: white;
		text-align: center;
		cursor: pointer;
		background-color: #03d3bd;
		/* position: fixed; */
		overflow: hidden;

	}

	.main>div {

		margin-left: 20px;
		margin-right: 1.25rem;
	}

	// 顶部按钮组
	.btn_group {
		display: flex;
		justify-content: space-between;
		margin-top: 1.25rem;
		margin-bottom: 30px;
		// margin-left: 0.625rem;


		// 搜索框
		.dataSearch {
			position: relative;
			width: 300px;
			height: 36px;

			// 输入框
			.ipt_val {
				position: absolute;
				left: 0;
				top: 0;
				padding: 0 14px 0 28px;
				outline: none;
				border-color: #d5d7d9;
				width: 170px;
				height: 34px;
				font-size: 14px;
				color: #181e33;
				border: 1px solid #e5e5e5;
				background: #f5f6f7;
				border-radius: 40px;

				&:hover {
					border-color: #3a8bff;
				}

				&:focus {
					border-color: #3a8bff;
				}
			}

			// 放大镜
			.ipt_fdj {
				position: absolute;
				// right: 14px;
				left: 8px;
				top: 8px;
				border: none;
				width: 18px;
				height: 18px;
				background-color: pink;
				background: url(/images/search_ico_new.png);
				background-size: 18px;

				&:hover {
					cursor: pointer;
					background-position: 0 -22px;
				}
			}

			// 搜索按钮
			.ipt_search {
				// width: 40px;
				position: absolute;
				right: 0;
				top: 0;
				padding: 0 22px;
				border: none;
				height: 36px;
				border-radius: 17px;
				background-color: rgb(58, 181, 74);
				color: #fff;

				&:hover {
					cursor: pointer;
					color: #3a8bff;
				}
			}
		}
	}

	.grid-content {
		height: 11.25rem;
		width: 100%;
		margin-bottom: 1.25rem;
		margin-left: 0.625rem;
		background-color: #f7fafc;
	}
</style>
